<template>
  <div class="main-content">
    <div class="search between">
      <div class="query">
      </div>
      <div class="set-group">
        <el-button @click="add" type="primary">新增</el-button>
        <el-button class="ico-button" @click="refresh">
          <el-icon>
            <Refresh />
          </el-icon>
        </el-button>
      </div>
    </div>
    <div class="table">
      <div class="table-main">
        <el-table :data="table.data" resizable border show-overflow-tooltip max-height="100%" height="100%" row-key="id"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" v-loading="table.load" default-expand-all>
          <template v-for="row in table.column">
            <el-table-column :label="row.label" :prop="row.key" :width="row.width" :align="row.align"
              :fixed="row.fixed">
              <template #default="scope">
                <span v-if="row.key == 'type'">
                  <el-tag type="primary" v-if="scope.row[row.key] == 1">普通菜单</el-tag>
                  <el-tag type="primary" v-if="scope.row[row.key] == 2">树状菜单</el-tag>
                  <el-tag type="primary" v-if="scope.row[row.key] == 3">扩展菜单</el-tag>
                  <el-tag type="primary" v-if="scope.row[row.key] == 4">链接菜单</el-tag>
                </span>
                <span v-else-if="row.key == 'mode'">
                  <el-tag type="primary">{{ scope.row[row.key] == 1 ? '菜单展示' : '页面展示' }}</el-tag>
                </span>
                <span v-else>
                  {{ scope.row[row.key] }}
                </span>
              </template>
            </el-table-column>
          </template>
          <el-table-column label="相关操作" column-key="handle" width="120" align="center" fixed="right">
            <template #default="scope">
              <el-button-group>
                <el-button link type="primary" @click="edit(scope.row)">编辑</el-button>
                <el-popconfirm popper-class="limit-popper" title="确定要删除吗?" @confirm="del(scope.row)">
                  <template #reference>
                    <el-button link type="danger">删除</el-button>
                  </template>
                </el-popconfirm>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script setup name="MenuList">

const { proxy } = getCurrentInstance()

// 搜索表单 下拉收起 start 
const isFold = ref(false)
function switchFold() {
  isFold.value = !isFold.value
}
// 搜索表单 下拉收起 end

// 表格字段配置 start
const table = reactive({
  load: false,
  column: [
    { label: '菜单名称', key: 'name', width: 'auto', show: true, align: 'left' },
    { label: '菜单标识', key: 'key', width: 'auto', show: true, align: 'center' },
    { label: '菜单路径', key: 'route', width: 'auto', show: true, align: 'center' },
    { label: '菜单类型', key: 'type', width: 'auto', show: true, align: 'center' },
    { label: '菜单模式', key: 'mode', width: 'auto', show: true, align: 'center' },
    { label: '菜单排序', key: 'sort', width: '100', show: true, align: 'center' },
    { label: '文件路径', key: 'component', width: 'auto', show: true, align: 'center' },
    { label: '备注信息', key: 'desc', width: 'auto', show: true, align: 'center' }
  ],
  data: []
})
// 表格字段配置 end 

onMounted(() => {
  getTable()
})

// 页面数据 start
const params = reactive({
  name: ''
})
const pages = reactive({
  page: 1,
  page_size: 300,
  count: 0
})

function refresh() {
  pages.page = 1
  getTable()
}
async function getTable() {
  table.load = true
  let res = await proxy.$get('adminMenuList', {
    page: pages.page,
    page_size: pages.page_size,
    name: params.name
  }, false)
  table.load = false
  if (res.code === 0) {
    table.data = res.data.list || []
    pages.count = res.data.total ? Number(res.data.total) : 0
  }
}

// 页面数据 end

// 增删改 start
function add() {
  proxy.$bus.emit('tabSwitch', 'menuDetail');
}
function edit(row) {
  proxy.$bus.emit('tabSwitch', { key: 'menuDetail', query: { id: row.id } });
}
async function del(row) {
  let res = await proxy.$post('adminMenuDel', {
    id: row.id
  })
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '删除成功'
    });
    getTable()
  }
}
// 增删改 end
</script>
<style scoped>
.read-the-docs {
  color: #888;
}
</style>
